<template>
  <el-row class="panel-group" :gutter="15">
    <template v-for="(item,index) in list">
      <el-col :xs="12" :sm="12" :lg="8" class="card-panel-col" :key="index">
        <div class='card-panel'>
          <div class="card-panel-description">
            <div class="card-panel-text">
              <span class="text">{{item.name}}</span>
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                <i class="el-icon-warning-outline"></i>
              </el-tooltip>
            </div>
            <div class="card-panel-state">
              <count-to class="card-panel-num" :startVal="0" :endVal="item.viewStatistics && item.viewStatistics.allData || 0" :duration="2600"></count-to>
            </div>
            <div class="card-panel-chart" :class="{'isChart' : item.isChart}">
              <mini-area style="height:46px" v-if="item.isChart" />
            </div>
            <div class="card-panel-state">
              <div class="size">
                <span class="card-panel-color">今日:</span>
                <count-to class="card-panel-num-size" :startVal="0" :endVal="item.viewStatistics && item.viewStatistics.nData || 0" :duration="2600"></count-to>
                <span class="card-panel-color" style="margin-left:20px;">昨日:</span>
                <count-to class="card-panel-num-size" :startVal="0" :endVal="item.viewStatistics && item.viewStatistics.yData|| 0" :duration="2600"></count-to>
              </div>
              <div class="size b">
                <trend :type="item.viewStatistics.tb ? 'up': 'down'">
                  <span slot="term" style="margin-right:5px;">日同比:</span>
                  <span slot="rate">{{item.viewStatistics && item.viewStatistics.tb}}%</span>
                </trend>
              </div>
            </div>
            <div class="card-panel-state download border" v-if="item.type === 'download'">
              <div class="size">
                <span class="card-panel-color">今日:</span>
                <count-to class="card-panel-num-size" :startVal="0" :endVal="item.viewStatistics && item.viewStatistics.nData|| 0" :duration="2600"></count-to>
                <span class="card-panel-color" style="margin-left:20px;">昨日:</span>
                <count-to class="card-panel-num-size" :startVal="0" :endVal="item.viewStatistics && item.viewStatistics.yData|| 0" :duration="2600"></count-to>
              </div>
              <div class="size b">
                <trend type="up">
                  <span slot="term">Andriod </span>
                  <span slot="rate">{{item.viewStatistics && item.viewStatistics.tb}}%</span>
                </trend>
              </div>
            </div>
            <div class="card-panel-state download" v-if="item.type === 'download'">
              <div class="size">
                <span class="card-panel-color">今日:</span>
                <count-to class="card-panel-num-size" :startVal="0" :endVal="item.viewStatistics && item.viewStatistics.nData|| 0" :duration="2600"></count-to>
                <span class="card-panel-color" style="margin-left:20px;">昨日:</span>
                <count-to class="card-panel-num-size" :startVal="0" :endVal="item.viewStatistics && item.viewStatistics.yData|| 0" :duration="2600"></count-to>
              </div>
              <div class="size b">
                <trend type="up">
                  <span slot="term">IOS </span>
                  <span slot="rate">{{item.viewStatistics && item.viewStatistics.tb}}%</span>
                </trend>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </template>
    <!-- <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              <span class="text">用户总数</span>
              <el-tooltip class="item" effect="dark" content="用户数据" placement="top">
                <i class="el-icon-warning-outline"></i>
              </el-tooltip>
            </div>
            <div class="card-panel-state">
              <count-to class="card-panel-num" :startVal="0" :endVal="totalAmount.cuserInfo && totalAmount.cuserInfo.allData|| 0" :duration="2600"></count-to>
            </div>
            <div class="card-panel-chart">
              <mini-bar style="height:46px" />
            </div>
            <div class="card-panel-state">
              <div class="size">
                <span class="card-panel-color">今日:</span>
                <count-to class="card-panel-num-size" :startVal="0" :endVal="totalAmount.cuserInfo && totalAmount.cuserInfo.nData|| 0" :duration="3000"></count-to>
                <span class="card-panel-color" style="margin-left:20px;">昨日:</span>
                <count-to class="card-panel-num-size" :startVal="0" :endVal="totalAmount.cuserInfo && totalAmount.cuserInfo.nData|| 0" :duration="3000"></count-to>
              </div>
              <div class="size">
                <trend type="down">
                  <span slot="term">日同比</span>
                  <span slot="rate">11%</span>
                </trend>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              <span class="text">分享总数</span>
              <el-tooltip class="item" effect="dark" content="分享总数" placement="top">
                <i class="el-icon-warning-outline"></i>
              </el-tooltip>
            </div>
            <div class="card-panel-state">
              <count-to class="card-panel-num" :startVal="0" :endVal="totalAmount.shareInfo && totalAmount.shareInfo.allData|| 0" :duration="3000"></count-to>
            </div>
            <div class="card-panel-chart">
              <mini-area style="height:46px" />
            </div>
            <div class="card-panel-state">
              <div class="size">
                <span class="card-panel-color">今日:</span>
                <count-to class="card-panel-num-size" :startVal="0" :endVal="totalAmount.shareInfo && totalAmount.shareInfo.nData || 0" :duration="3000"></count-to>
                <span class="card-panel-color" style="margin-left:20px;">昨日:</span>
                <count-to class="card-panel-num-size" :startVal="0" :endVal="totalAmount.shareInfo && totalAmount.shareInfo.yData || 0" :duration="3000"></count-to>
              </div>
              <div class="size">
                <trend type="up">
                  <span slot="term">日同比</span>
                  <span slot="rate">11%</span>
                </trend>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-description">
            <div class="card-panel-text">
              <span>下载总数</span>
            </div>
            <div class="card-panel-state">
              <count-to class="card-panel-num" :startVal="0" :endVal="totalAmount.shareInfo && totalAmount.shareInfo.allData|| 0" :duration="3000"></count-to>
            </div>
            <div class="card-panel-chart">
              <mini-area style="height:46px" />
            </div>
            <div class="card-panel-state">
              <div class="size">
                <span class="card-panel-color">今日:</span>
                <count-to class="card-panel-num-size" :startVal="0" :endVal="totalAmount.shareInfo && totalAmount.shareInfo.nData || 0" :duration="3000"></count-to>
                <span class="card-panel-color">昨日:</span>
                <count-to class="card-panel-num-size" :startVal="0" :endVal="totalAmount.shareInfo && totalAmount.shareInfo.yData || 0" :duration="3000"></count-to>
              </div>
              <div class="size">
                <trend type="up">
                  <span slot="term">日同比</span>
                  <span slot="rate">12%</span>
                </trend>
              </div>
            </div>
          </div>
        </div>
      </el-col> -->
  </el-row>
</template>
<script>
import CountTo from 'vue-count-to';
export default {
  name: 'PanelGroup',
  components: {
    CountTo
  },
  data () {
    return {
      totalAmount: {}
    };
  },
  props: {
    list: {
      type: Array
    }
  },
  methods: {

  }
};
</script>
<style lang="less" scoped>
.panel-group {
  .card-panel-col {
    margin-bottom: 15px;
  }
  .card-panel {
    font-size: 12px;
    // height: 210px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    .card-panel-description {
      margin: 26px 26px 20px;
      .card-panel-chart {
        height: 20px;
      }
      .card-panel-chart.isChart {
        height: 46px;
        margin: 18px 0 20px;
      }
      .card-panel-state {
        display: inline-block;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
        .card-panel-color {
          // color:red;
          font-size: 13px;
          line-height: 18px;
        }
        .card-panel-num {
          position: relative;
          top: 2px;
          margin-left: 5px;
          font-size: 32px;
        }
        .card-panel-num-size {
          font-size: 15px;
          font-weight: 500;
        }
      }
      .card-panel-state.download {
        padding: 7px 0 0;
        margin-top: 6px;
        .size.b {
          font-weight: bold;
          color: #666;
        }
      }
      .card-panel-state.download.border {
        border-top: 1px solid #eee;
      }
      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        .el-icon-warning-outline {
          font-size: 16px;
        }
      }
      .card-panel-num {
        font-size: 24px;
      }
    }
  }
}

@media only screen and (min-width: 1200px) {
  .el-col-lg-6{
    .card-panel-color{
      margin-left: 0!important;
      display: block;
    }
    .card-panel-num-size{margin-top: -10px;}
  }
}
</style>
